import React from 'react';
import * as PropTypes from 'prop-types';
import styles from './style/index.less';
import Iconfont from 'components/Iconfont';

class Legend extends React.Component {
  static defaultProps = {
    dataSource: [],
    color: ['#4482ff', '#4ecb73', '#fbd437', '#975fe5'],
    options: { vField: 'val', tField: 'title', unit: '万元' }
  }

  // 处理color
  styleColorObj(idx){
    const { color } = this.props;
    let styleColor = null;
    if(typeof(color) === 'string'){
      styleColor = { color };
    }else if(Array.isArray(color) && color.length>1){
      styleColor = { color: color[idx] }
    }
    return styleColor;
  }

  render() {
    const { dataSource, options } = this.props;
    const { vField, tField, unit } = options;
    
    return (
      <div className={`${styles.Legend}`}>
        {dataSource.map((ele, idx) => {
          return (<div key={idx} className={styles.items}>
            <div className={styles.extra} style={this.styleColorObj(idx)}>
              {ele[vField] || ele[vField] === 0 ? ele[vField] : '-'}
            </div>
            <div className={styles.content}>{ele[tField]}{unit ? `(${unit})`: ''}</div>
          </div>)
        })
        }
      </div>
    );
  }
}

Legend.propTypes = {
  dataSource: PropTypes.array,
}

export default Legend;